<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>试验田规划编辑器</title>
    <link rel="stylesheet" href="css/grid.css"/>
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/ruler.css">
    <script src="jquery-1.8.1.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/grid.js"></script>
    <script src="js/jquery.zxxPageRuler.1.1.js"></script>
</head>

<body>
        <div class="nav">
            <form action="">
            <ul class="navigation" >
                <li>
                    <label for="">试验小区名称(棚外):</label>
                    <input style="border: 1px solid #ccc;
                padding: 7px 0px;
                border-radius: 3px; /*css3属性IE不支持*/
                padding-left:5px; " type="text" value="" id="pId"/>
                </li>
                <li>
                    <label for="">品种数量:</label>
                    <input style="border: 1px solid #ccc;
                padding: 7px 0px;
                border-radius: 3px; /*css3属性IE不支持*/
                padding-left:5px; " type="text" value="" id="species_num"/>
                </li>
                <li>
                    <label for="sel">试验类型:</label>
                    <select required name="" id="sel" style="border: black solid 1px">
                        <option value="">请选择</option>
                        <!--<option value="[5,3,20,加工品比,#7CFC00]">加工品比</option>       &lt;!&ndash;5行3重复  20株，绿色&ndash;&gt;-->
                        <!--<option value="[2,1,20,加工鉴定,#00D4FF]">加工鉴定</option>       &lt;!&ndash;2行0重复  20株，蓝色&ndash;&gt;-->
                        <!--<option value="[3,2,20,加工预备比,#FFFF00]">加工预备比</option>     &lt;!&ndash;3行2重复  20株,黄色&ndash;&gt;-->
                        <!--<option value="[3,2,20,品系筛选,#FA8072]">品系筛选</option>       &lt;!&ndash;3行2重复  20株,粉红色&ndash;&gt;-->
                        <!--<option value="[5,3,20,早熟品比,#B08ACC]">早熟品比</option>       &lt;!&ndash;5行3重复  20株,紫色&ndash;&gt;-->
                        <!--<option value="[3,1,20,早熟鉴定,#7FFFD4]">早熟鉴定</option>       &lt;!&ndash;3行不重复  20株，青色&ndash;&gt;-->
                        <!--<option value="[2,1,20,晚熟鉴定,#648E71]">晚熟鉴定</option>       &lt;!&ndash;2行不重复  20株,深绿色&ndash;&gt;-->
                        <!--<option value="[3,2,20,晚熟预备比,#F4AA73]">晚熟预备比</option>     &lt;!&ndash;3行2重复  20株,橘黄色&ndash;&gt;-->
                        <!--<option value="[1,1,15,杂交圃,#FFB9CC]">杂交圃</option>         &lt;!&ndash;1行不重复  15株,浅粉色&ndash;&gt;-->
                        <!--<option value="[1,1,5,株系调查,#43FCFF]">株系调查</option>       &lt;!&ndash;1行不重复  5株,浅蓝色&ndash;&gt;-->
                    </select>
                </li>
                <li><span>        </span></li>
                <li><span>        </span></li>
                <li><button class="confirm1" style="cursor: pointer;background-color: #409EFF;color: white;font-size: 15px;">新建</button></li>
                <!--<li><span id="confirm" class="confirm1" style="margin-left: 50px;border:1px solid #000000;cursor:pointer;color:#000000" >新建</span></li>-->
                <!--<li><span id="generate" class="confirm" style="border:1px solid #000000;color:#000000;cursor:pointer">生成</span></li>-->
                <li> <button class="cancel" style="cursor: pointer;background-color: #409EFF;color: white;font-size: 15px;"> 撤回 </button></li>
                <!--<li><span class="finish" style="cursor:pointer">生成表格</span></li>-->
                <li><button class="save" style="cursor: pointer;background-color: #409EFF;color: white;font-size: 15px;";> 保存 </button></li>
                <li><span>    </span></li>
                <!--<li><button class="read" style="cursor: pointer;background-color: #409EFF;color: white;font-size: 15px;"> 读取 </button></li>-->
                <li><button class="browse" style="cursor: pointer;background-color: #409EFF;color: white;font-size: 15px;"> 预览 </button></li>
                <li><button class="return" onClick="custom_close()" style="cursor: pointer;background-color: #409EFF;color: white;font-size: 15px;"> 关闭 </button></li>
                <li><span>|  注：1格代表5株1行</span></li>

            </ul>
            </form>
        </div>
        <div class="flag" >
            <span class="text">西</span>
            <div class="ico_up"></div>
            <div class="line"></div>
        </div>

        <!--<form id ="sText" style="overflow-y: auto;height: 60px">-->
            <!--<div  id="drag" style="margin-right: 50px" > </div>-->
        <!--</form>-->

       <div style="margin-left: 40px; margin-bottom: 20px" >
           <div id="parent" class="ui-widget-content container demo_box" dir="rtl" style="margin-bottom: 20px;position: relative">
               <div class="ui-widget-header" id="containment-wrapper" >  </div>

           </div>
           <br>
           <div class="Tb">
               <table id = "tb" class="expTb" >


               </table>
           </div>

       </div>


        <!--<div class="right">-->
            <!--&lt;!&ndash;<div class="icon">&ndash;&gt;-->
                <!--&lt;!&ndash;<button class="bigger">+</button>&ndash;&gt;-->
                <!--&lt;!&ndash;<button class="smaller">-</button>&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
            <!--&lt;!&ndash;<form action="#">&ndash;&gt;-->
                <!--&lt;!&ndash;<div class="write">&ndash;&gt;-->
                    <!--&lt;!&ndash;试验田id: <input type="text" value="" id="pId"> </input> <br>&ndash;&gt;-->
                    <!--&lt;!&ndash;品种数量: <input type="text" value="" id="species_num"> </input> <br>&ndash;&gt;-->
                    <!--&lt;!&ndash;<label for="sel">请选择：</label>&ndash;&gt;-->
                    <!--&lt;!&ndash;<select name="" id="sel">&ndash;&gt;-->
                        <!--&lt;!&ndash;<option value=""></option>&ndash;&gt;-->
                        <!--&lt;!&ndash;<option value="[5,3,20,加工品比,#7CFC00]">加工品比</option>       &lt;!&ndash;5行3重复  20株，绿色&ndash;&gt;&ndash;&gt;-->
                        <!--&lt;!&ndash;<option value="[2,1,20,加工鉴定,#0000FF]">加工鉴定</option>       &lt;!&ndash;2行0重复  20株，蓝色&ndash;&gt;&ndash;&gt;-->
                        <!--&lt;!&ndash;<option value="[3,2,20,加工预备比,#FFFF00]">加工预备比</option>     &lt;!&ndash;3行2重复  20株,黄色&ndash;&gt;&ndash;&gt;-->
                        <!--&lt;!&ndash;<option value="[3,2,20,品系筛选,#FA8072]">品系筛选</option>       &lt;!&ndash;3行2重复  20株,粉红色&ndash;&gt;&ndash;&gt;-->
                        <!--&lt;!&ndash;<option value="[5,3,20,早熟品比,#9932CC]">早熟品比</option>       &lt;!&ndash;5行3重复  20株,紫色&ndash;&gt;&ndash;&gt;-->
                        <!--&lt;!&ndash;<option value="[3,1,20,早熟鉴定,#7FFFD4]">早熟鉴定</option>       &lt;!&ndash;3行不重复  20株，青色&ndash;&gt;&ndash;&gt;-->
                        <!--&lt;!&ndash;<option value="[2,1,20,晚熟鉴定,#6B8E23]">晚熟鉴定</option>       &lt;!&ndash;2行不重复  20株,深绿色&ndash;&gt;&ndash;&gt;-->
                        <!--&lt;!&ndash;<option value="[3,2,20,晚熟预备比,#F4A460]">晚熟预备比</option>     &lt;!&ndash;3行2重复  20株,橘黄色&ndash;&gt;&ndash;&gt;-->
                        <!--&lt;!&ndash;<option value="[1,1,15,杂交圃,#FFDAB9]">杂交圃</option>         &lt;!&ndash;1行不重复  15株,浅粉色&ndash;&gt;&ndash;&gt;-->
                        <!--&lt;!&ndash;<option value="[1,1,5,株系调查,#00BFFF]">株系调查</option>       &lt;!&ndash;1行不重复  5株,浅蓝色&ndash;&gt;&ndash;&gt;-->
                    <!--&lt;!&ndash;</select>&ndash;&gt;-->
                    <!--&lt;!&ndash;&lt;!&ndash;<select id="in_row" >&ndash;&gt;&ndash;&gt;-->
                        <!--&lt;!&ndash;&lt;!&ndash;<option value="2">2</option>&ndash;&gt;&ndash;&gt;-->
                        <!--&lt;!&ndash;&lt;!&ndash;<option value="3">3</option>&ndash;&gt;&ndash;&gt;-->
                        <!--&lt;!&ndash;&lt;!&ndash;<option value="5">5</option>&ndash;&gt;&ndash;&gt;-->
                    <!--&lt;!&ndash;&lt;!&ndash;</select>行&ndash;&gt;&ndash;&gt;-->
                    <!--&lt;!&ndash;&lt;!&ndash;<select id="in_col">&ndash;&gt;&ndash;&gt;-->
                        <!--&lt;!&ndash;&lt;!&ndash;<option value="0"></option>&ndash;&gt;&ndash;&gt;-->
                        <!--&lt;!&ndash;&lt;!&ndash;<option value="2"></option>&ndash;&gt;&ndash;&gt;-->
                        <!--&lt;!&ndash;&lt;!&ndash;<option value="3"></option>&ndash;&gt;&ndash;&gt;-->
                    <!--&lt;!&ndash;&lt;!&ndash;</select>重复&ndash;&gt;&ndash;&gt;-->
                    <!--&lt;!&ndash;<button id="confirm" class="confirm1">添加</button>&ndash;&gt;-->
                    <!--&lt;!&ndash;<button class="cancel">取消</button>&ndash;&gt;-->
                    <!--&lt;!&ndash;<button class="finish">完成设计</button>&ndash;&gt;-->
                    <!--&lt;!&ndash;<button class="save">保存</button>&ndash;&gt;-->
                    <!--&lt;!&ndash;<button class="read">读取</button>&ndash;&gt;-->
                    <!--&lt;!&ndash;<button class="browse">浏览</button>&ndash;&gt;-->
                    <!--&lt;!&ndash;<button id="generate" class="confirm" style="display: none">确认生成</button>&ndash;&gt;-->
                    <!--&lt;!&ndash;<a href="../index.html">返回</a>&ndash;&gt;-->
                <!--&lt;!&ndash;</div>&ndash;&gt;-->



            <!--&lt;!&ndash;</form>&ndash;&gt;-->
            <!--<form id ="sText"> <div  id="drag">-->
            <!--</div></form>-->
            <!--<div id="loc">-->
                <!--<div id = "move"></div>-->
            <!--</div>-->
        <!--</div>-->
        <div style="clear:both;">

        </div>




</body>

<script>
    $(function() {
      $('#resizable').resizable()
    // $( "#containment-wrapper" ).draggable({ grid: [ 20, 20 ] });
    })
function getX(obj) {
    var parObj = obj
  var left = obj.offsetLeft
  while (parObj = parObj.offsetParent) {
        left += parObj.offsetLeft
  }
    return left
}

function getY(obj) {
    var parObj = obj
  var top = obj.offsetTop
  while (parObj = parObj.offsetParent) {
        top += parObj.offsetTop
  }
    return top
}
    function custom_close() {
      if
      (confirm('您确定要关闭本页吗？')) {
        window.opener = null
    window.open('', '_self')
        window.close()
    } else {}
    }
function DisplayLoc(event) {
    var top, left, oDiv
  oDiv = document.getElementById('parent')
  top = getY(oDiv)
  left = getX(oDiv)
  // document.getElementById('loc').innerHTML = (event.clientX-left+oDiv.scrollLeft) -2+"px";
  var move = document.getElementById('move')
  var locX = parseInt((211 - ((event.clientX - left + oDiv.scrollLeft) / 10)) / 2)
  var locY = parseInt((((event.clientY - top + oDiv.scrollTop) / 10)) / 2)
    move.style.marginLeft = parseInt((event.clientX - left + oDiv.scrollLeft) / 10) + 'px'
    move.style.marginTop = parseInt((event.clientY - top + oDiv.scrollTop) / 10) + 'px'
  move.innerHTML = '(' + locX + ',' + locY + ')'
}
</script>
</html>
